import React, { useEffect, useState, useCallback } from 'react'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import Demo from '@SCREENS/demo/demo'
import Login from '@SCREENS/login/Login'
import Setting from '@SCREENS/me/Setting'
import ForbidUser from '@SCREENS/me/ForbidUser'
import AboutUs from '@SCREENS/me/AboutUs'
import DeviceGuide from '@SCREENS/guide/DeviceGuide'
import BluetoothGuide from '@SCREENS/guide/BluetoothGuide'
import WebView from '@SCREENS/webView'
import { RootStackParamList, RouterKey } from '@NAVIGATION/NavigationType'
import TabNavigator from '@NAVIGATION/TabNavigator'
import Storage, { StorageKey } from '@UTILS/Storage'
import { useAppDispatch } from '@REDUX/store'
import Images from '@IMAGE'
import fetchUpdateStatue from '@REDUX/thunk/user'

const Stack = createNativeStackNavigator<RootStackParamList>()
const headerShown = false

function RootRouter() {
  const dispatch = useAppDispatch()
  const [initRouter, setInitRouter] = useState<keyof RootStackParamList>()
  useEffect(() => {
    const checkLogin = async () => {
      const token = await Storage.get(StorageKey.token)
      setInitRouter(token ? RouterKey.Root : RouterKey.Login)
    }

    checkLogin()
  }, [])

  const initAppUpdate = useCallback(async () => {
    dispatch(fetchUpdateStatue())
  }, [dispatch])

  useEffect(() => {
    initAppUpdate()
  }, [initAppUpdate])

  if (!initRouter) return null
  return (
    <Stack.Navigator
      initialRouteName={initRouter}
      screenOptions={{
        title: '',
        headerTintColor: '#333333',
        headerTitleStyle: {
          fontSize: 18,
          color: '#333',
          fontFamily: 'PingFangSC-Medium',
          fontWeight: '500',
        },
        headerTitleAlign: 'center',
        headerBackImageSource: Images.common.back,
        headerShadowVisible: false,
        headerBackTitleVisible: false,
        statusBarAnimation: 'fade',
        statusBarStyle: 'dark',
        statusBarColor: '#fff',
        headerStyle: {
          // backgroundColor: 'rgba(0,0,0,0.1)',
        },
      }}
    >
      <Stack.Screen
        name={RouterKey.Root}
        component={TabNavigator}
        options={{
          headerShown,
          statusBarStyle: 'dark',
          statusBarColor: '#F3F3F5',
        }}
      />
      <Stack.Screen name={RouterKey.Demo} component={Demo} />
      <Stack.Screen name={RouterKey.Login} component={Login} options={{ headerShown }} />
      <Stack.Screen name={RouterKey.Setting} component={Setting} options={{ title: '设置' }} />
      <Stack.Screen name={RouterKey.ForbidUser} component={ForbidUser} options={{ title: '注销账号' }} />
      <Stack.Screen name={RouterKey.AboutUs} component={AboutUs} options={{ title: '关于我们' }} />
      <Stack.Screen
        name={RouterKey.DeviceGuide}
        component={DeviceGuide}
        options={({ route }) => {
          const showHeader = !!(route.params?.title)
          return ({
            headerStyle: {
              backgroundColor: showHeader ? '#F3F3F5' : 'white',
            },
            title: route.params?.title,
            headerShown: showHeader,
          })
        }}
      />
      <Stack.Screen
        name={RouterKey.BluetoothGuide}
        component={BluetoothGuide}
        options={{ headerShown }}
      />
      <Stack.Screen name={RouterKey.WebView} component={WebView} />
    </Stack.Navigator>

  )
}
export default RootRouter
